<template>
  <el-container>
    <el-header>
      <h2 class="title">设备状态监测</h2>
    </el-header>
    <el-main>
      <!-- 添加设备按钮 -->
      <el-button type="primary" @click="openAddDeviceDialog"
        >添加设备</el-button
      >

      <!-- 设备表格 -->
      <el-table :data="deviceData" style="margin-top: 20px; width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="deviceName" label="设备名称" />
        <el-table-column prop="deviceAddress" label="设备所在地址" />
        <el-table-column prop="score" label="评分" width="80" />
        <el-table-column prop="deviceStatus" label="设备状态" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="editDevice(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="deleteDevice(scope.row)"
              >删除</el-button
            >
            <el-button size="small" @click="openStatusLogDialog(scope.row)"
              >状态日志</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加/编辑设备对话框 -->
      <el-dialog
        v-model="editDialogVisible"
        :title="isEditMode ? '编辑设备' : '添加设备'"
      >
        <el-form :model="currentDevice" label-width="80px">
          <el-form-item label="设备名称">
            <el-input v-model="currentDevice.deviceName" />
          </el-form-item>
          <el-form-item label="设备所在地址" label-width="100px">
            <el-input v-model="currentDevice.deviceAddress" />
          </el-form-item>
          <el-form-item label="初始评分">
            <el-input v-model="currentDevice.score" type="number" />
          </el-form-item>
          <el-form-item label="设备状态">
            <el-input v-model="currentDevice.deviceStatus" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveDevice">确定</el-button>
        </template>
      </el-dialog>

      <!-- 状态日志对话框 -->
      <el-dialog v-model="statusLogDialogVisible" title="状态日志">
        <div class="status-log">
          <el-timeline>
            <el-timeline-item
              v-for="(log, index) in currentStatusLogs"
              :key="index"
              :color="log.color"
            >
              <p>{{ log.status }}</p>
              <p style="font-size: 12px; color: gray">{{ log.description }}</p>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

// 表格数据
const deviceData = ref([
  {
    id: 1,
    deviceName: "监控",
    deviceAddress: "板桥大道与双风大道交汇处",
    score: 85,
    deviceStatus: "正常"
  },
  {
    id: 2,
    deviceName: "交通信号灯",
    deviceAddress: "双风大道大南街方向",
    score: 65,
    deviceStatus: "故障"
  },
  {
    id: 3,
    deviceName: "监控",
    deviceAddress: "前川大道双风路上桥处",
    score: 90,
    deviceStatus: "警告"
  },
  {
    id: 4,
    deviceName: "灯柱",
    deviceAddress: "鲁台村村委会入口",
    score: 100,
    deviceStatus: "正常"
  }
]);

const editDialogVisible = ref(false);
const statusLogDialogVisible = ref(false);
const isEditMode = ref(false);
const currentDevice = ref({});

// 状态日志数据（模拟数据）
const statusLogs = {
  1: [
    { status: "正常", description: "", color: "green" },
    { status: "警告", description: "线路接触不良", color: "yellow" },
    { status: "故障", description: "无法正常使用", color: "red" },
    { status: "正常", description: "已维修", color: "green" }
  ],
  2: [
    { status: "正常", description: "", color: "green" },
    { status: "警告", description: "线路接触不良", color: "yellow" },
    { status: "故障", description: "无法正常使用", color: "red" },
    { status: "正常", description: "已维修", color: "green" }
  ],
  3: [
    { status: "正常", description: "", color: "green" },
    { status: "警告", description: "线路接触不良", color: "yellow" },
    { status: "故障", description: "无法正常使用", color: "red" },
    { status: "正常", description: "已维修", color: "green" }
  ],
  4: [
    { status: "正常", description: "", color: "green" },
    { status: "警告", description: "线路接触不良", color: "yellow" },
    { status: "故障", description: "无法正常使用", color: "red" },
    { status: "正常", description: "已维修", color: "green" }
  ]
};

const currentStatusLogs = ref([]);

// 打开添加设备对话框
const openAddDeviceDialog = () => {
  isEditMode.value = false;
  currentDevice.value = {
    deviceName: "",
    deviceAddress: "",
    score: 0,
    deviceStatus: ""
  };
  editDialogVisible.value = true;
};

// 打开编辑设备对话框
const editDevice = device => {
  isEditMode.value = true;
  currentDevice.value = { ...device };
  editDialogVisible.value = true;
};

// 保存设备
const saveDevice = () => {
  if (isEditMode.value) {
    const index = deviceData.value.findIndex(
      item => item.id === currentDevice.value.id
    );
    if (index !== -1) deviceData.value[index] = { ...currentDevice.value };
    ElMessage.success("设备信息已更新");
  } else {
    currentDevice.value.id = deviceData.value.length + 1;
    deviceData.value.push({ ...currentDevice.value });
    ElMessage.success("设备已添加");
  }
  editDialogVisible.value = false;
};

// 删除设备
const deleteDevice = device => {
  deviceData.value = deviceData.value.filter(item => item.id !== device.id);
  ElMessage.success("设备已删除");
};

// 打开状态日志对话框
const openStatusLogDialog = device => {
  currentStatusLogs.value = statusLogs[device.id] || [];
  statusLogDialogVisible.value = true;
};
</script>

<style scoped>
.title {
  text-align: center;
  margin-bottom: 20px;
}
.status-log {
  padding: 10px;
}
</style>
